<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">

            <div class="search-item">
                <label>客户端类型：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.type"
                        filterable
                        clearable
                        placeholder="类型"
                        class="address-select"
                    >
                        <el-option
                            v-for="item in clientType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>是否审核：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.verify"
                        filterable
                        clearable
                        placeholder="审核"
                        class="address-select"
                    >
                        <el-option
                            v-for="item in reviewList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
<!--            <div class="search-item">-->
<!--                <label>起止时间：</label>-->
<!--                <el-date-picker-->
<!--                    v-model="queryData.startTime"-->
<!--                    type="date"-->
<!--                    placeholder="选择日期">-->
<!--                </el-date-picker>-->
<!--            </div>-->
<!--            <div class="search-item">-->
<!--                <label class="minWidthClear">至：</label>-->
<!--                <el-date-picker-->
<!--                    v-model="queryData.endTime"-->
<!--                    type="date"-->
<!--                    placeholder="选择日期">-->
<!--                </el-date-picker>-->
<!--            </div>-->

            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>

        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickAdd('新增版本管理')"
            >添加版本管理
            </el-button>
            <el-button
                type="danger"
                style="margin-bottom: 2em"
                icon="el-icon-delete"
                :disabled="selectDisable"
                @click="
                    tableDelete(
                        '/version/deletes',
                        {
                            ids: tableSelect
                        },
                        true
                    )
                "
            >批量删除
            </el-button>
        </div>

        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                :row-class-name="tableRowClassName"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <!--                <el-table-column-->
                <!--                    prop="createdByName"-->
                <!--                    label="创建者"-->
                <!--                    width="120"-->
                <!--                ></el-table-column>-->
                <el-table-column prop="groupName" label="平台" width="120">

                </el-table-column>
                <el-table-column prop="type" label="类型" width="120">
                    <template slot-scope="scope">
                        <k-tag
                            :tag="deviceType[scope.row.type]"
                            :text="true"
                        ></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="renewal"
                    label="是否升级"
                >
                    <template slot-scope="scope">
                        {{scope.row.renewal?'是':'否'}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="coercive"
                    label="是否强制升级"
                >
                    <template slot-scope="scope">
                        {{scope.row.coercive?'是':'否'}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="version"
                    label="版本号"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="url"
                    label="下载链接"
                    min-width="200"
                ></el-table-column>
                <el-table-column
                    prop="content"
                    label="更新提示信息"
                    min-width="300"
                ></el-table-column>
                <el-table-column
                    prop="verify"
                    label="是否在审核阶段"
                    min-width="100"
                >
                    <template slot-scope="scope">
                        {{scope.row.verify?'是':'未在审核阶段'}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="contact"
                    label="联系方式"
                    min-width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    min-width="100"
                >
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="clickSimpleEdit(scope.row, '编辑')"
                        >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            type="text"
                            size="mini"
                            class="danger"
                            icon="el-icon-delete"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/version/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>

        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            :before-close="dialogClose"
            custom-class="one-dialog"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"
                class="table-edit-from"
            >
                <el-form-item label="绑定平台" >
                    <el-select v-model="dataForm.groupId" filterable clearable placeholder="请选择平台">
                        <el-option
                            v-for="item in groupList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    不设置即为通用
                </el-form-item>
                <el-form-item label="客户端类型" prop="type">
                    <el-select v-model="dataForm.type" placeholder="请选择">
                        <el-option
                            v-for="item in clientType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否审核中" prop="verify" required>
                    <el-radio v-model="dataForm.verify" :label="true">审核中</el-radio>
                    <el-radio v-model="dataForm.verify" :label="false">未进行审核</el-radio>
                </el-form-item>
                <el-form-item label="是否升级" prop="renewal" required>
                    <el-radio v-model="dataForm.renewal" :label="true">升级</el-radio>
                    <el-radio v-model="dataForm.renewal" :label="false">未升级</el-radio>
                </el-form-item>
                <el-form-item label="是否强制升级" prop="coercive">
                    <el-switch
                        v-model="dataForm.coercive"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="版本号" prop="version" required>
                    <el-input v-model="dataForm.version"></el-input>
                </el-form-item>
                <el-form-item label="下载链接" prop="url">
                    <el-input v-model="dataForm.url"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="contact" >
                    <el-input v-model="dataForm.contact"></el-input>
                </el-form-item>
                <el-form-item label="更新内容" prop="content">
                    <el-input type="textarea" :rows="4" v-model="dataForm.content"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="formDataSave('/version/update')"
                >保 存</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";

export default {
    name: "version",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            clientType: [
                {label: "安卓", value: "android"},
                {label: "苹果", value: "ios"},
            ],
            reviewList:[
                {label:"审核中",value:true},
                {label:"未在审核阶段",value:false}
            ],
            queryData: {
                type: "",
                verify: "",
                startTime: null,
                endTime: null,
                orders: [
                    {
                        asc: false,
                        column: "created_time"
                    }
                ]
            },
            initAddForm: {
                coercive:false
            },
            dataForm: {
                coercive:false
            },
            dataFormRule: {
                verify: [
                    {
                        required: true,
                        message: "请选择是否审核",
                        trigger: "blur"
                    }
                ],
                renewal: [
                    {
                        required: true,
                        message: "请选择是否升级",
                        trigger: "blur"
                    }
                ],
                type: [
                    {
                        required: true,
                        message: "请选择类型",
                        trigger: "change"
                    }
                ],
                version: [
                    {
                        required: true,
                        message: "请填写版本号",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    computed: {
        ...mapState({
            deviceType: state => state.status.deviceType
        })
    },
    watch: {},
    created() {
        this.loadGroupList();
    },
    mounted() {
    },
    methods: {
        search(queryData) {
            this.loadTable("/version/page", queryData);
        },
        tableRowClassName({row, rowIndex}) {
            // 把每一行的索引放进row
            row.index = rowIndex;
        },
    }
};
</script>

<style lang="scss" scoped>
.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.minWidthClear {
    min-width: 0 !important;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
